<template>
  <div id="traffic-view">
    <div class="content">
      <!--<TopViews/>-->
      <LeftChart :totalIndex="totalIndex" :roadIndexList="roadIndexList" :todayIndexData="todayIndexData" :yestodayIndexData="yestodayIndexData" :lastWeekIndexData="lastWeekIndexData"/>
    </div>
  </div>
</template>

<script>
  import TopViews from './homeViews/titleView.vue'
  import LeftChart from './urbanTraffic/leftChart.vue'
  import UbtrafficViewController from '../service/ubtrafficViewController'
  import eventBus from '../util/event-bus'

  export default {
    name: 'UrbanTraffic',
    data () {
      return {
        totalIndex:{},  //凉州区拥堵指数和均速
        roadIndexList:[],  //不同道路指数
        todayIndexData:[],//今日指数
        yestodayIndexData:[],//昨日指数
        lastWeekIndexData:[],//上周同日指数
      }
    },
    mounted(){
      this.controller = new UbtrafficViewController(this);
      this.controller.getRoadData();
      this.controller.getIndexData();
      this.controller.getTodayChartsData();
      this.controller.getYestodayChartsData();
      this.controller.getLastweekChartsData();
      eventBus.$emit('trafficShow');
    },
    beforeDestroy() {
      eventBus.$emit('trafficHide');
    },
    components: {
      TopViews,
      LeftChart,
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";

  #traffic-view {
    width: 100%;
    height: $min-height;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20px 15px;
    box-sizing: border-box;
    overflow-x: hidden;
    pointer-events: none;
    .content{
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
</style>
